<template>
  <div class="wrap">
        <picture>
            <source class="img" type="image/webp" :srcSet="pic+'.webp'" />
            <img class="img" alt="封面" :src="pic" />
        </picture>
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'ResponsiveImage',
    props: {
        src: {
            type: String
        },
        size: {
            type: String,
            default: '@480w_270h_1c'
        }
    },
    computed: {
        pic() {
            return this.src + this.size
        }
    }
}
</script>

<style lang="scss" scoped>
    .wrap{
        position: relative;
        background: {
            image: url('~@/assets/placeholder.png');
            color: #f3f3f3;
            size: 36%;
            repeat: no-repeat;
            position: 50%;
        }
        overflow: hidden;
        padding-bottom: (270 / 480) * 100%;
    }
    .img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>